<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-13 16:35:44
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2024-01-11 10:48:21
 * @FilePath: \test\src\components\BussComponents\PartyBuildingGuidance.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <BoxTitleBig title="党建引领" subTitle="党员总数" @subTitleClick="subTitleClick" :subTitleStyle="subTitleStyle">
    <template #body>
      <div class="content">
        <div class="top">
          <div class="icon">
            <img src="../../assets/images/党建引领.png" alt="" />
          </div>
          <div class="count">
            <div class="count_item" v-for="item in count.split('')">
              {{ item }}
            </div>
          </div>
        </div>
        <div class="chart">
          <VCharts :chartOption="chartData.option1()"></VCharts>
        </div>
      </div>
    </template>
  </BoxTitleBig>
</template>

<script setup>
import { reactive, ref } from "vue";
import chartData from "@/config/chartOption.js"
// 党员数量
const count = ref("00000282");
// 副标题样式
let subTitleStyle = reactive({
})
function subTitleClick(e){
  console.log(e);
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  @include display(space-between, center, column);

  .chart {
    width: 100%;
    height: 0;
    flex-grow: 1;
  }

  .top,
  .count {
    @include display(center, center, row);
  }
  .top {
    width: 100%;
    margin: 30px 0;
    .icon{
      margin-right: 40px;
      width: 174px;
      height: 137px;
      img{
        width: 100%;
      }
    }
  }
  .count {
    .count_item {
      width: 58px;
      height: 84px;
      background: url(~@/assets/images/number_bg.png);
      background-size: 100% 100%;
      font-size: 60px;
      font-family: Impact, Impact-Regular;
      font-weight: 400;
      color: #ffffff;
      @include display(center, center, row);
      margin: 0 8px;
    }
  }
}
</style>
